<template>
  <div >
    <div class="model-title-css">
      流程自定义发布
    </div>
    <div class="background_wrap">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="search.name" clearable size="small" placeholder="名称搜索" style="width: 200px;"
                  class="filter-item" @keyup.enter.native="query"/>

        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="query">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="reset">重置
        </el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="openDialogTableForm">新增
        </el-button>
      </div>
    </div>
    <div class="list_wrap">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
     :border="true"
      :row-class-name="tableRowStyleName"
      :cell-class-name="tableCellStyleName"
      :header-cell-class-name="tableHeaderCellStyleName"
      :stripe="true"
      highlight-current-row
    >
      <el-table-column align="left" label="模型名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="流程分类" align="left">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="模型标识" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.procDefName }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="备注" prop="remark" align="left">
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template> -->
      </el-table-column>
      <el-table-column align="left" prop="created_at" label="操作" width="360">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" title="编辑" size="mini" @click="edit(scope.row)"/>
          <el-button type="success" icon="el-icon-picture" title="流程图" size="mini" @click="editModeler(scope.row)"/>
          <el-button type="danger " icon="el-icon-delete" title="删除" size="mini" @click="del(scope.row)"/>
          <el-button type="success" icon="el-icon-upload" title="发布" size="mini" @click="deploy(scope.row)" plain/>
          <el-button type="danger" icon="el-icon-download" title="导出" size="mini" @click="expModel(scope.row)" plain/>
          <el-button type="warning" icon="el-icon-upload2" title="导入" size="mini" @click="impModel(scope.row)" plain/>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" style="margin-top: 30px">
      <el-pagination
        @current-change="paginationChange"
        :current-page="pageInfo.pageNo+1"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next"
        :total="pageInfo.total">
      </el-pagination>
    </div>
    </div>
    </div>

    <el-dialog
      title="新增流程"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="流程分类">
          <el-input v-model="form.type"/>
        </el-form-item>
        <el-form-item label="模型标识">
          <el-input v-model="form.procDefName"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>

    <div v-if="editor.editorVisible" class="wf-edior">
      <el-dialog
        :visible.sync="editor.editorVisible"
        :close-on-click-modal="false"
        :close-on-press-escape='false'
        fullscreen
      >
        <div slot="title" class="step-wrapper">
          <div class="title" style="font-weight: 700; color: #606266;line-height: 26px;">{{ editor.title }}</div>
        </div>
        <div class="stepBox">
          <el-steps :active="active" finish-status="success" direction="vertical">
            <el-step @click.native="changeSelected(1)">
              <div slot="title" class="stepText">
                关联字段
              </div>
            </el-step>
            <el-step @click.native="changeSelected(2)">
              <div slot="title" class="stepText">
                配置流程图
              </div>
            </el-step>
            <el-step @click.native="changeSelected(3)">
              <div slot="title" class="stepText">
                日志节点配置
              </div>
            </el-step>
            <el-step @click.native="changeSelected(4)">
              <div slot="title" class="stepText">
                流程发布
              </div>
            </el-step>
          </el-steps>
        </div>
        <field @changStatus="changStatus" :procDefKey="editor.procDefName" v-if="select == 1"/>
        <process @changStatus="changStatus" :procDefKey="editor.procDefName" v-if="select == 2" :id="editor.modelId"
                 :title="editor.title"/>
        <node @changStatus="changStatus" :procDefKey="editor.procDefName" v-if="select == 3" :id="editor.modelId"/>
        <div v-if="select == 4">
          <div class="head-container">
            <el-button class="filter-item" icon="el-icon-upload" size="mini" type="success" @click="deploy(editor)"
                       style="margin-left: 154px;margin-top: 40px">发布
            </el-button>
          </div>
          <div class="head-container" style="margin-left: 20px; width: 1580px; margin:0 auto">
            <el-card>
              <el-table
                v-loading="listLoading"
                :data="hisList"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                size="medium"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{textAlign: 'center'}"
              >
                <el-table-column prop="time" label="发布时间"/>
                <el-table-column prop="version" label="版本号"/>
              </el-table>
            </el-card>
          </div>
        </div>
      </el-dialog>
    </div>

    <input ref="file" type="file" style="display: none" @change="uploadProcessFile">
  </div>
</template>

<script>
  import {getList, saveItem, delItem, deploy, exportActiviti, importActiviti} from '@/api/wf/modeler'
  import {MessageBox, Message} from 'element-ui'
  import process from '@/views/wf/editor'
  import field from '@/views/wf/field'
  import node from '@/views/wf/node'
  import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'

  export default {
    components: {
      process,
      field,
      node
    },
    data() {
      return {
        tableRowStyleName: tableRowStyleGol,
        tableCellStyleName: tableCellStyleGol,
        tableHeaderCellStyleName: tableHeaderCellStyleGol,
        select: 2,
        active: 2,
        search: {
          name: null
        },
        form: {
          id: null,
          name: null,
          type: null,
          procDefName: null,
          remark: null
        },
        his: {
          time: null,
          version: null
        },
        dialogVisible: false,
        list: [],
        hisList: [],
        listLoading: true,
        importId: null,
        pageInfo: {
          pageNo: 0,
          pageSize: 10,
          total: 0
        },
        editor: {
          title: '编辑流程',
          modelId: null,
          procDefName: null,
          editorVisible: false
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 切换列表
      paginationChange(index) {
        this.pageInfo.pageNo = index - 1
        this.fetchData()
      },
      openDialogTableForm() {
        this.dialogVisible = true
        this.form = {
          id: null,
          name: null,
          type: null,
          procDefName: null,
          remark: null
        }
      },
      query() {
        this.fetchData()
      },
      reset() {
        this.search.name = null
        this.fetchData()
      },
      edit(obj) {
        this.dialogVisible = true
        this.form = obj
      },
      del(obj) {
        MessageBox.confirm('确定要删除？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const param = {
            params: {
              id: obj.id
            }
          }
          delItem(param).then(res => {
            if (res.code === 200) {
              Message({
                message: '删除成功！',
                type: 'info'
              })

              this.dialogVisible = false
              this.fetchData()
            }
          })
        })
      },
      onSave() {
        saveItem(this.form).then(res => {
          if (res.code === 200) {
            Message({
              message: '保存成功！',
              type: 'info'
            })

            this.dialogVisible = false
            this.fetchData()
          }
        })
      },
      deploy(obj) {
        const param = {
          params: {
            id: obj.modelId
          }
        }
        deploy(param).then(res => {
          if (res.code === 200) {
            Message({
              message: '发布成功！',
              type: 'success'
            })
          }
        })
      },
      expModel(obj) {
        const param = {
          params: {
            id: obj.modelId
          }
        }
        exportActiviti(param).then(res => {
          var blob = new Blob([res.data.xml], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
          })
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.style.display = 'none'
          downloadElement.href = href
          downloadElement.download = decodeURI(res.data.fileName) // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      },
      impModel(obj) {
        this.importId = obj.modelId
        const e = this.$refs.file
        e.click()
      },
      uploadProcessFile(e) {
        const formData = new FormData()
        const file = e.target.files[0]
        formData.append('file', file)
        formData.append("id", this.importId);
        importActiviti(
          formData,
          {headers: {'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime()}}
        ).then((res) => {
          Message({
            message: '导入成功！',
            type: 'info'
          })
        })
      },
      fetchData() {
        this.listLoading = true
        let param = {
          name: this.search.name
        }
        param = Object.assign({}, param, this.pageInfo)
        getList(param).then(response => {
          if (response.code === 200) {
            this.list = response.data.content
            this.pageInfo.total = response.data.totalElements
          }
          this.listLoading = false
        })
      },
      editModeler(obj) {
        this.editor = {}
        this.editor = {
          title: obj.name,
          procDefName: obj.procDefName,
          modelId: obj.modelId,
          editorVisible: true
        }
        if (obj.deployed) {
           this.active = 3
        }
         this.select = 2
      },
      changStatus(status) {
        this.active = status
      },
      changeSelected(sel) {
        this.select = sel
      }
    }
  }
</script>


<style lang="scss" scoped>
  .step-wrapper {
    height: 26px;
    display: flex;
    flex: 1;

    .title {
      width: 132px;
    }

  }

  .stepBox {
    position: absolute;
    height: calc(100vh - 100px);
  }

  .stepText {
    width: 14px !important;
    font-size: 14px !important;
    color: #67C23A;
  }

  ::v-deep {
    .el-step__icon {
      cursor: pointer;
    }
  }
  .pagination-box{
    display: flex;
    justify-content: flex-end;
  }
</style>
